<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="Thymeleaf">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>品牌管理首页</title>
    <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
    <style>
        .layui-table-cell{
            height: auto !important;
            white-space: normal;
        }
        .table-search-fieldset {
            margin: 10px 10px 0px 10px;
            border: 1px solid #e6e6e6;
            padding: 10px 20px 5px 20px;
            color: #6b6b6b;
        }
        .layui-form-item {
            margin-left: 15%;
        }
    </style>
</head>
<body>
<fieldset class="table-search-fieldset">
    <legend>搜索信息</legend>
    <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">品牌id</label>
                    <div class="layui-input-inline">
                        <input type="text" name="brandId" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">品牌名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                </div>
            </div>
        </form>
    </div>
</fieldset>
<table class="layui-hide" id="demo" lay-filter="test"></table>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加新品牌</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger " id="import" lay-event="deletes">批量删除品牌</button>
    </div>

</script>
<script type="text/html" id="barDemo" >
    <a class="layui-btn layui-btn-primary layui-btn-sm btn" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-sm btn" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm btn" lay-event="del">删除</a>
</script>

<script type="text/html" id="status">
    <input type="checkbox" name="status" value="{{d.showStatus}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="statusDemo" {{ d.showStatus == 1 ? 'checked' : '' }}>
</script>

<script src="../../lib/layui-v2.5.5/layui.js" ></script>
<script>
    layui.config({
        version: '1611854082986' //为了更新 js 缓存，可忽略
    });

    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider','form'], function(){
        var laydate = layui.laydate //日期
            ,laypage = layui.laypage //分页
            ,layer = layui.layer //弹层
            ,table = layui.table //表格
            ,carousel = layui.carousel //轮播
            ,upload = layui.upload //上传
            ,element = layui.element //元素操作
            ,slider = layui.slider //滑块
            ,form = layui.form
        //执行一个 table 实例
        table.render({
            elem: '#demo'
            ,height: 'full-20'
            ,url: '/product/brand/list' //数据接口
            ,title: '商品列表'
            ,page: true //开启分页
            ,toolbar: '#toolbar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            ,totalRow: false //开启合计行
            ,cols:
                [
                    [   //表头
                        {type: 'checkbox', width:'2%'}
                        ,{field: 'brandId', title: '品牌id', align:'center', width:'8%', sort: true, totalRowText: '合计：', unresize:true}
                        ,{field: 'name', title: '品牌名', align:'center', width:'10%', unresize:true}
                        ,{field: 'logo', title: '品牌logo地址', align:'center', width:'21%', totalRow: true, unresize:true}
                        ,{field: 'descript', title: '介绍', align:'center', width:'22%', unresize:true}
                        // ,{field: 'showStatus', title: '显示状态[0-不显示；1-显示]', align:'center', width:'17%', totalRow: true, unresize:true}
                        ,{field: 'showStatus', title: '显示状态', align:'center', width:'8%', templet: '#status', totalRow: true, unresize:true}
                        ,{field: 'firstLetter', title: '检索首字母', align:'center', width:'8%', unresize:true}
                        ,{field: 'sort', title: '排序', width:'5%', align:'center', totalRow: true, unresize:true}
                        ,{title: '操作', align:'center', width:'16.5%', toolbar: '#barDemo', unresize:true}
                    ]
                ]
            ,response:{
                statusName: 'code' ,// 对应 code
                msgName: 'msg'  , // 对应 msg
                countName: 'count' , // 对应 count
                dataName: 'data'  // 对应 data
            }
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            layer.alert(result, {
                title: '最终的搜索信息'
            });
            //执行搜索重载
            table.reload('demo', { //''内为表格id
                page: {
                    curr: 1
                }
                , where: {
                    searchParams: result
                }
            }, 'data');
            return false;
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.id),data = checkStatus.data,delList=[]; //获取选中的数据
            switch(obj.event){
                case 'add':
                    // layer.msg('添加');
                    var index = layer.open({
                        title: '添加新品牌',
                        type: 2,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        area: ['70%', '85%'],
                        content: '../Brand_Manage/brand_add.html',
                    });
                    break;
                case 'deletes':
                    if (data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            delList.push(data[i].id);
                        }
                    }
                    if(delList !== ''){
                        layer.confirm('确定删除所选项吗？',{title:'警告'},function (index) {
                            // $.ajax({
                            //     url: '/cd/workPlatform/tool/remove.afca',
                            //     type:'post',
                            //     dataType:'json',
                            //     data:"id="+delList,
                            //     success:function (data,statusText) {
                            //         if(data.code==='0')
                            //         {
                                        layer.msg('批量删除成功');
                                        // table.reload('demo',{});
                                    // } else{
                                    //     layer.msg('删除失败');
                                    // }
                                })
                                // ,'error':function () {
                                //     layer.msg('系统错误');
                                // }
                        //     })
                        // });
                    }
                    // if(data.length === 0){
                    //     layer.msg('批量删除至少选中一个品牌');
                    // } else {
                    //     layer.confirm('确认删除选中的品牌么', function(index){

                        // if(delList!==''){
                            // layer.comfirm('确定删除所选项吗？',function (index) {
                            //     $.ajax({
                            //         url: '/cd/workPlatform/tool/remove.afca',
                            //         type:'post',
                            //         dataType:'json',
                            //         data:"id="+delList,
                            //         success:function (data,statusText) {
                            //             if(data.code==='0'){layer.msg('删除成功');
                            //                 table.reload('idTest',{});
                            //             }else{
                            //                 layer.msg('删除失败');
                            //             }
                            //         },
                            //         'error':function () {
                            //             layer.msg('系统错误');
                            //         }
                            //     })
                            // })
                            // obj.del(); //删除对应行（tr）的DOM结构
                            // layer.msg("批量删除成功",function () {
                            //     layer.close(index);
                            // });
                            //向服务端发送删除指令
                        // });
                        // layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                    // }
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                // layer.msg('查看操作');
                var index = layer.open({
                    title: '查看品牌内容',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['70%', '85%'],
                    content: '../Brand_Manage/brand_detail.html',
                });
            } else if(layEvent === 'del'){
                layer.confirm('真的删除行么', {title:'警告'}, function(index){
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.msg("删除成功",function () {
                        layer.close(index);
                    });
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){
                // layer.msg('编辑操作');
                var index = layer.open({
                    title: '修改品牌内容',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['70%', '85%'],
                    content: '../Brand_Manage/brand_edit.html',
                });
            }
        });

        //监听显示状态开关操作
        form.on('switch(statusDemo)', function(obj){
            if(obj.elem.checked===true) {
                this.value=1;
            } else {
                this.value=0;
            }
            //下面的语句在写后端时可以改成ajax请求状态值的修改
            layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
        });

        //分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            ,count: 100 //总页数
            ,skin: '#009688' //自定义选中色值
            //,skip: true //开启跳页
            ,jump: function(obj, first){
                if(!first){
                    layer.msg('第'+ obj.curr +'页', {offset: 'b'});
                }
            }
        });

        //上传
        // upload.render({
        //     elem: '#uploadDemo'
        //     ,url: 'https://httpbin.org/post' //改成您自己的上传接口
        //     ,done: function(res){
        //         layer.msg('上传成功');
        //         layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
        //         console.log(res)
        //     }
        // });
    });
</script>
</body>
</html>
